<template>
  <div class="w_h_100">
    <div class="inlet">报表统计 > <span class="size">业务报表</span></div>
    <div class="head">
      <div>查询条件</div>
      <myform :fields="fields" :model="model" class="m_t_16" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="content m_t_16">
      <div class="tips d_f a_i_c">
        <div class="line"></div>
        汇总数据
      </div>
      <div class="d_f j_c_s_b f_w_w summary">
        <div v-for="(item, index) in list" :key="index" class="d_f box">
          <img :src="item.img" alt="" class="img">
          <div class="left">
            <div class="name">{{ item.name }}</div>
            <div class="d_f num">{{ item.number }} <span class="unit">{{ item.unit }}</span></div>
          </div>
        </div>
      </div>
      <div class="tips d_f a_i_c m_t_24">
        <div class="line"></div>
        业务进件数据统计
      </div>
      <div class="statistics">
        <!--图表数据-->
        <div class="d_f  j_c_s_b">
          <div class="echarts_box" :class="active==1 ? 'active' : ''">
            <div class="d_f j_c_s_b">
              <div class="tips1 d_f a_i_c">
                <div class="line"></div>
                分业务统计
              </div>
              <div class="detail c_p" @click="detail(1)">查看详情</div>
            </div>
            <div class="echarts" id="business" v-if="productInfo.length>0"></div>
            <div class="echarts d_f j_c_c a_i_c" v-else>暂无数据</div>
          </div>
          <div class="echarts_box" :class="active==2 ? 'active' : ''">
            <div class="d_f j_c_s_b">
              <div class="tips1 d_f a_i_c">
                <div class="line"></div>
                分部门统计
              </div>
              <div class="detail c_p" @click="detail(2)">查看详情</div>
            </div>
            <div class="echarts" id="dept" v-if="deptInfo.length>0"></div>
            <div class="echarts d_f j_c_c a_i_c" v-else>暂无数据</div>
          </div>
          <div class="echarts_box" :class="active==3 ? 'active' : ''">
            <div class="d_f j_c_s_b">
              <div class="tips1 d_f a_i_c">
                <div class="line"></div>
                分地区统计
              </div>
              <div class="detail c_p" @click="detail(3)">查看详情</div>
            </div>
            <div class="echarts" id="address" v-if="areaInfo.length>0"></div>
            <div class="echarts d_f j_c_c a_i_c" v-else>暂无数据</div>
          </div>
        </div>
        <!--表格数据-->
        <div class="mytable transaction">
          <div class="d_f j_c_s_b">
            <li class="title">{{active==1?'分业务统计详情':active==2?'分部门统计详情':'分地区统计详情'}}</li>
            <el-button @click="exportFile">导出</el-button>
          </div>
          <mytable :fields="tableFields" class="m_t_16" :isTotal="true" :defaultList="records" :handle="false"
            :isPaginationShow="false">
          </mytable>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { businessType } from '../../../type/report'
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, onUnmounted } from 'vue'
import { copy } from '../../../utils/date'
import { Search } from '@element-plus/icons-vue'
import * as echarts from 'echarts';
import { statistic, serviceStatInfo, serviceStatList, serviceStatExport } from '../../../api/report'
import { derivation } from '../../../utils/date'
const model = {
  type: '',
  range: [],
  startTime: '',
  endTime: '',
}
export default defineComponent({
  name: '',
  setup() {
    const data: businessType = reactive({
      list: [
        {
          name: '总业务笔数',
          unit: '笔',
          number: 0,
          type: 'countNum',
          img: new URL('../../../assets/business_num.png', import.meta.url),
        },
        {
          name: '总业务户数',
          unit: '个',
          number: 0,
          type: 'countCustomer',
          img: new URL('../../../assets/businessAccount.png', import.meta.url),
        },
        {
          name: '总申请金额（万）',
          unit: '万',
          number: 0,
          type: 'applyMoney',
          img: new URL('../../../assets/businessMoney.png', import.meta.url),
        },
        {
          name: '担保笔数',
          unit: '笔',
          number: 0,
          type: 'countDBNum',
          img: new URL('../../../assets/guaranteesNum.png', import.meta.url),
        },
        {
          name: '担保金额（万）',
          unit: '万',
          number: 0,
          type: 'guaMoney',
          img: new URL('../../../assets/businessMoney.png', import.meta.url),
        },
        {
          name: '审批中笔数',
          unit: '个',
          number: 0,
          type: 'auditNum',
          img: new URL('../../../assets/approvalsNum.png', import.meta.url),
        },
        {
          name: '已拒绝笔数',
          unit: '笔',
          number: 0,
          type: 'turnDownNum',
          img: new URL('../../../assets/errorNum.png', import.meta.url),
        },
        {
          name: '已终止笔数',
          unit: '笔',
          number: 0,
          type: 'overNum',
          img: new URL('../../../assets/terminationNum.png', import.meta.url),
        },
      ],
      fields: [
        {
          label: "时间基准",
          prop: 'type',
          placeholder: '请选择',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
          labelWidth: 80,
        },
        {
          label: "起止日期",
          prop: 'range',
          type: 'range',
          labelWidth: 80,
        },
        {
          prop: 'button',
          labelWidth: 80,
        }
      ],
      model: copy(model),
      options: {
        type: [
          {
            name: '基于进件日期',
            id: 1,
          },
          {
            name: '基于担保起止日期',
            id: 2,
          },

        ],
      },
      tableFields: [
        {
          label: '业务名称',
          prop: 'productName',
          width: '200px'
        },
        {
          label: '申请金额（万）',
          prop: 'applyMoney',
          width: '150px'
        },
        {
          label: '占比',
          prop: 'applyMoneyPercent',
          width: '100px'
        },
        {
          label: '申请批次数',
          prop: 'countNum',
          width: '100px'
        },
        {
          label: '申请项目数',
          prop: 'countProjectNum',
          width: '100px'
        },
        {
          label: '占比',
          prop: 'countProjectNumPercent',
          width: '100px'
        },
        {
          label: '担保项目数',
          prop: 'countDbNum',
          width: '100px'
        },
        {
          label: '占比',
          prop: 'countDbNumPercent',
          width: '100px'
        },
        {
          label: '担保金额（万）',
          prop: 'guaMoney',
          width: '150px'
        },
        {
          label: '占比',
          prop: 'guaMoneyPercent',
          width: '100px'
        },
        {
          label: '审批中项目数',
          prop: 'countAudit',
          width: '100px'
        },
        {
          label: '已拒绝项目数',
          prop: 'countTurnDown',
          width: '100px'
        },
        {
          label: '已终止项目数',
          prop: 'countOver',
          width: '100px'
        },
      ],
      records: [],
      chart1: null,
      chart2: null,
      chart3: null,
      active:1,
      areaInfo:[],
      deptInfo:[],
      productInfo:[],

    })
    onBeforeMount(() => {
    })
    onUnmounted(() => {
      if(data.chart1){
        data.chart1.dispose()
        data.chart1 = null
      }
      if(data.chart2){
        data.chart2.dispose()
         data.chart2 = null
      }
      if(data.chart3){
        data.chart3.dispose()
         data.chart3 = null
      }
    });
    onMounted(() => {
      methods.getData()

    })
    const methods = {
      getData() {
        let val = copy(data.model)
        val = {
          type: data.model.type,
          startTime: data.model.startTime ? data.model.startTime + ' 00:00:00' : '',
          endTime: data.model.endTime ? data.model.endTime + ' 23:59:59' : ''
        }
        statistic(val).then((res: any) => {
          data.list.map((item: any) => {
            for (let i in res) {
              if (item.type == i) {
                item.number = res[i]
              }
            }
          })
        })
        let obj1 = copy(val)
        let obj2 = copy(val)
        let obj3 = copy(val)
        obj1.sort = 1
        obj2.sort = 2
        obj3.sort = 3
        serviceStatInfo(obj1).then((res: any) => {
          data.productInfo=res.productInfo
          if(res.productInfo.length>0){
            setTimeout(()=>{
              methods.getBusinessChat(res.productInfo)
            },100)
          }

        })
        serviceStatInfo(obj2).then((res: any) => {
          data.deptInfo=res.deptInfo
          if(res.deptInfo.length>0){
            setTimeout(()=>{
              methods.getDepChatt(res.deptInfo)
            },100)
          }

        })
        serviceStatInfo(obj3).then((res: any) => {
          data.areaInfo=res.areaInfo
          if(res.areaInfo.length>0){
            setTimeout(()=>{
              methods.getAddressChat(res.areaInfo)
            },100)
            
          }
        })
        serviceStatList(obj1).then((res: any) => {
          res.map(item=>{
            for(let i in item){
              if((item[i]==''||item[i]==null)&&item[i]!=0){
              item[i]='-'
              }
            }
          })
          data.records = res
        })
      },
      detail(num:number){
        let val = copy(data.model)
        val = {
          type: data.model.type,
          startTime: data.model.startTime ? data.model.startTime + ' 00:00:00' : '',
          endTime: data.model.endTime ? data.model.endTime + ' 23:59:59' : '',
          sort:num
        }
        data.active=num
        if(num==1){
     data.tableFields[0].label='业务名称'
     data.tableFields[0].prop='productName'
        }else if(num==2){
 data.tableFields[0].label='部门名称'
     data.tableFields[0].prop='deptName'
        }else{
          data.tableFields[0].label='地区名称'
     data.tableFields[0].prop='areaName'
        }
        serviceStatList(val).then((res: any) => {
          data.records = res
        })
      },
      //重置搜索
      resetting() {
        data.model = copy(model)
        methods.getData()
      },
      //开始搜索
      searchFor() {
        if (data.model.range) {
          if (data.model.range.length > 0) {
            data.model.startTime = data.model.range[0]
            data.model.endTime = data.model.range[1]
          } else {
            data.model.startTime = data.model.endTime = ''
          }
        } else {
          data.model.startTime = data.model.endTime = ''
        }
        methods.getData()
      },
      //获取业务数据图表
      getBusinessChat(list: any) {
        data.chart1 = echarts.init(document.getElementById('business'));
        data.chart1.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0%',
            left: 'center',
            icon: 'circle',
          },
          color: ['#2466FF', '#F9AAF1', '#21CCFF', '#FFC300', '#6FD87D', '#FFA1A1'],
          series: [
            {
              name: '业务统计',
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['40%', '60%'],
              data: list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      //获取部门数据图表
      getDepChatt(list: any) {
        data.chart2 = echarts.init(document.getElementById('dept'));
        data.chart2.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0%',
            left: 'center',
            icon: 'circle',
          },
          color: ['#2466FF', '#F9AAF1', '#21CCFF', '#FFC300', '#6FD87D', '#FFA1A1'],
          series: [
            {
              name: '部门统计',
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['40%', '60%'],
              data: list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      //获取地区数据图表
      getAddressChat(list: any) {
        data.chart3 = echarts.init(document.getElementById('address'));
        data.chart3.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0%',
            left: 'center',
            icon: 'circle',
          },
          color: ['#2466FF', '#F9AAF1', '#21CCFF', '#FFC300', '#6FD87D', '#FFA1A1'],
          series: [
            {
              name: '地区统计',
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['40%', '60%'],
              data: list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      },
      exportFile() {
        let val = copy(data.model)
        val = {
          type: data.model.type,
          startTime: data.model.startTime ? data.model.startTime + ' 00:00:00' : '',
          endTime: data.model.endTime ? data.model.endTime + ' 23:59:59' : '',
          sort:data.active
        }
        serviceStatExport(val).then((res: any) => {
          derivation(res, '业务统计报表')
        })
      }
    }
    return {
      ...toRefs(data),
      ...methods, Search
    }
  }
})
</script>
<style scoped lang='scss'>
.head {
  width: calc(100% - 3.32vw);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 24px 1.66vw;
  margin-top: 12px
}

.content {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 24px 32px;
  height: calc(100% - 216px);

  .tips {
    background: rgba(24, 120, 255, 0.06);
    width: calc(100% - 48px);
    height: 44px;
    border-radius: 6px 6px 0px 0px;
    padding: 0px 24px;
    color: rgba(0, 0, 0, 0.9);

    .line {
      width: 4px;
      height: 16px;
      margin-right: 8px;
      background: #1878FF;
    }
  }

  .summary {
    width: calc(100% - 48px);
    padding: 0px 24px;
    background: rgba(24, 120, 255, 0.02);
    border-radius: 0px 0px 6px 6px;
  }

  .statistics {
    width: calc(100% - 48px);
    padding: 24px 24px;
    background: rgba(24, 120, 255, 0.02);
    border-radius: 0px 0px 6px 6px;
  }

  .box {
    box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
    border-image: linear-gradient(134deg, rgba(155, 188, 235, 0.5) 10%, rgba(102, 142, 197, 0) 62%) 1;
    background: linear-gradient(172deg, #F5F9FF 13%, #FFFFFF 59%);
    width: 20%;
    height: 3.34vw;
    margin-top: 1.25vw;
    border-radius: 6px;
    padding: 1.25vw 1.66vw;
  }

  .img {
    width: 4.16vw;
    height: 4.16vw;
  }

  .left {
    margin-left: 1.25vw;
  }

  .name {
    color: #86909C;
    font-size: 0.933vw;
  }

  .num {
    color: #1D2129;
    font-size: 1.66vw;
    font-weight: 700;

    .unit {
      font-weight: 400 !important;
      font-size: 1.04vw;
      margin-top: 15px;
      margin-left: 10px;
    }
  }
 .active{
  background: linear-gradient(177deg, #EDF4FF 3%, #F9FCFF 59%) !important;
 }
  .echarts_box {
    width: calc(31% - 2.39vw);
    height: 26.14vw;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08), 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
    border-image: linear-gradient(156deg, rgba(155, 188, 235, 0.5) 4%, rgba(102, 142, 197, 0) 82%) 1;
    background: #fff;
    border-radius: 6px;
    padding: 1.25vw 1.66vw;

    .tips1 {
      color: rgba(0, 0, 0, 0.9);
      font-size: 16px;
    }

    .line {
      background: #1878FF;
      width: 4px;
      height: 16px;
      border-radius: 55px;
      margin-right: 8px;
    }

    .detail {
      color: #1878FF;
      font-size: 16px;
    }

    .echarts {
      width: 100%;
      height: calc(100% - 25px);
    }

  }

  .mytable {
    background: rgba(24, 120, 255, 0.02);
    width: calc(100% - 48px);
    padding: 24px;

    .title {
      color: #1878FF;
      font-size: 15px;
    }
  }
}
</style>
<style lang="scss">
.transaction {
  tr {
    .cell {
      font-size: 12px !important;
      font-weight: 400 !important;
    }
  }
}
</style>